<template>
    <div>
        <MyTable :list="list">
            <template #header>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>
            <template #body="{ item, ind }">
                <td>{{ ind + 1 }}</td>
                <td>{{ item.goods_name }}</td>
                <td>{{ item.goods_price }}</td>
                <td>
                    <input
                        v-focus
                        @keydown.esc="scope.row.inputValue = ''"
                        @keydown.enter="enterFn(item)"
                        @blur="item.inputVisible = false"
                        class="tag-input form-control"
                        style="width: 100px"
                        type="text"
                        v-if="item.inputVisible"
                    />
                    <button v-else style="display: block" class="btn btn-primary btn-sm add-tag" @click="item.inputVisible = true">+Tag</button>
                    <span v-for="(it, index) in item.tags" :key="index" class="badge badge-warning">
                        {{ it }}
                    </span>
                </td>
                <td><button class="btn btn-danger btn-sm">删除</button></td>
            </template>
        </MyTable>
    </div>
</template>

<script>
import MyTable from '../components/MyTable'
// import MyTable from "../components/MyTable";
import axios from 'axios'
axios.defaults.baseURL = 'https://www.escook.cn'
export default {
    methods: {
        enterFn(obj) {
            // 回车
            // console.log(obj.inputValue);
            if (obj.inputValue.trim().length === 0) {
                alert('请输入数据')
                return
            }

            obj.tags.push(obj.inputValue) // 表单里的字符串状态tags数组
            obj.inputValue = ''
        },
    },
    components: {
        MyTable,
    },
    data() {
        return {
            list: [], // 所有数据
        }
    },
    created() {
        axios({
            url: '/api/goods',
        }).then((res) => {
            console.log(res)
            this.list = res.data.data
        })
    },
}
</script>
